<!DOCTYPE html>
<html>
<head>
    <title>环境监控系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: #f0f2f5;
        }
        .dashboard {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .data-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin: 20px 0;
        }
        .data-card {
            padding: 20px;
            border-radius: 8px;
            color: white;
            text-align: center;
        }
        #temperature { background: linear-gradient(45deg, #ff6b6b, #ff8787); }
        #humidity { background: linear-gradient(45deg, #4dabf7, #339af0); }
        #light { background: linear-gradient(45deg, #ffd43b, #fcc419); }
        #human { background: linear-gradient(45deg, #adb5bd, #868e96); }
        .value {
            font-size: 2.4em;
            font-weight: bold;
            margin: 10px 0;
        }
        .controls {
            text-align: center;
            margin-top: 25px;
        }
        button {
            padding: 12px 30px;
            margin: 0 10px;
            border: none;
            border-radius: 25px;
            background: #495057;
            color: white;
            cursor: pointer;
        }
        .mode-status {
            text-align: center;
            font-size: 1.2em;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <h1>环境监控看板</h1>

        <div class="mode-status">
            当前模式：<span id="currentMode">加载中...</span>
        </div>

        <div class="data-grid">
            <div class="data-card" id="temperature">
                <h2>温度</h2>
                <div class="value">--</div>
                <div class="unit">℃</div>
            </div>
            <div class="data-card" id="humidity">
                <h2>湿度</h2>
                <div class="value">--</div>
                <div class="unit">%</div>
            </div>
            <div class="data-card" id="light">
                <h2>光照</h2>
                <div class="value">--</div>
                <div class="unit">lux</div>
            </div>
            <div class="data-card" id="human">
                <h2>人员检测</h2>
                <div class="value">--</div>
            </div>
        </div>

        <div class="controls">
            <button onclick="setMode('监护模式')">监护模式</button>
            <button onclick="setMode('浏览模式')">浏览模式</button>
        </div>
    </div>

    <script>
        // 数据缓存优化
        const elements = {
            temperature: document.querySelector('#temperature .value'),
            humidity: document.querySelector('#humidity .value'),
            light: document.querySelector('#light .value'),
            human: document.querySelector('#human .value'),
            mode: document.getElementById('currentMode')
        }

        // 更新数据展示
        function updateDisplay(data) {
            elements.temperature.textContent = data.temperature;
            elements.humidity.textContent = data.humidity;
            elements.light.textContent = data.light;
            elements.human.textContent = data.people ? "有人" : "无人";
        }

        // 获取最新数据
        async function fetchData() {
            try {
                const response = await fetch('/bowuguan/api');
                // const { data, mode } = await response.json();
                const { data } = await response.json();
                updateDisplay(data);
                // elements.mode.textContent = mode;
            } catch (error) {
                console.error('数据获取失败:', error);
            }
        }

        // 设置工作模式（POST请求）
        async function setMode(mode) {
            try {
                const response = await fetch('/bowuguan/api/submit', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ mode })
                });

                const result = await response.json();
                if(result.status === 'success') {
                    elements.mode.textContent = result.current_mode;
                }
            } catch (error) {
                console.error('模式设置失败:', error);
            }
        }

        // 定时刷新（每2秒）
        setInterval(fetchData, 2000);
        fetchData(); // 初始化加载
    </script>
</body>
</html>